<template>
  <div class="product-wapper" @mousedown.self="handleProductShow" v-if="value">
    <div class="product-container">
      <div class="recent">
        <div class="recent-inner">
          <span data-v-a876b9d0="" class="label" style="margin-right: 8px;">最近访问</span>
          <a :href="item.url" v-for="(item, index) in recentList" target="_blank" :key="index" class="one">{{item.model_name}}</a>
          <el-autocomplete v-model="search" :fetch-suggestions="handleSuggest" placeholder="请输入内容"
            @select="onSuggest" class="search-box" popper-class="product-suggest">
            <i class="el-icon-search el-input__icon" slot="suffix"></i>
            <template slot-scope="{ item }">
              <h3>{{ item.typeName }}</h3>
              <p class="addr">{{ item.desc }}</p>
            </template>
          </el-autocomplete>
        </div>
      </div>
      <div class="product-list">
        <div class="column" v-for="(item1, index1) in menuList" :key="index1">
          <div class="product-block" v-for="(item2, index2) in item1" :key="index2">
            <span class="title">{{item2.label}}</span>
            <ul class="list">
              <li v-for="(item3, index3) in item2.menus" :key="index3">
                <a :href="item3.context" target="_blank">{{item3.typeName}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './style/index.scss'
import { recentList, menuList } from './data.js'
export default {
  props: {
    value: {
      type: Boolean
    }
  },
  created() {
    this.loadMenuList()
  },
  data() {
    return {
      recentList,
      menuList: [],
      suggestList: [],
      search: '',
    }
  },
  methods: {
    loadMenuList() {
      // 处理成多级标题，用于展示
      let tidList = []
      menuList.forEach(menuItem => {
        if(tidList.some(tidItem => { return tidItem == menuItem.tid })) return 
        tidList.push(menuItem.tid)
      })
      this.menuList = new Array(tidList.length).fill([])
      tidList.forEach(tidItem => {
        this.menuList[tidItem-1] = menuList.filter(menuItem => {
          return menuItem.tid == tidItem
        })
      })
      // 处理成线性表，用于建议
      menuList.forEach(item => {
        item.menus.forEach(item2 => {
          this.suggestList.push(item2)
        })
      })
    },
    handleSuggest(value, cb) {
      value == '' ? cb([]) : cb(this.suggestList.filter(item => { return item.typeName.indexOf(value) != -1 }))
    },
    onSuggest(value) {
      open(value.context, '_blank')
    },
    handleProductShow() {
      // v-model
      this.$emit('input', false)
    }
  }
}
</script>